<template>
  <el-dialog width="300px" title="请输入图片验证码" :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <img style="width: 100%;" :src="imgSrc" alt="">

    <el-input v-model.trim="result" autocomplete="off" placeholder="请输入验证码"></el-input>

    <div slot="footer" class="dialog-footer">
      <el-button @click="hide">取 消</el-button>
      <el-button type="primary" @click="onClick">确 定</el-button>
    </div>

  </el-dialog>
</template>

<script>
export default {
  props: {
    imgSrc: {
      type: String,
      default: ''
    },
    onClickCB: {
      type: Function,
      default: null
    },
    onClickCancel: {
      type: Function,
      default: null
    }
  },

  data () {
    return {
      dialogFormVisible: false,
      result: ''
    }
  },

  methods: {
    onClick () {
      if (!this.result) {
        return
      }
      if (this.onClickCB) {
        this.onClickCB(this.result)
      }
      this.hide()
    },
    show () {
      this.dialogFormVisible = true
    },
    hide () {
      this.dialogFormVisible = false
      if (this.onClickCancel) {
        this.onClickCancel()
      }
    }
  }
}
</script>
